<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>System Info and MAC Addresses with QR Codes</title>
</head>

<body>
    <h1>System Information</h1>
    <div id="system-info">Fetching...</div>

    <h1>MAC Addresses and QR Codes</h1>
    <div id="mac-info">Fetching...</div>

    <script>
        // Fetch system info
        fetch('http://localhost:3000/systeminfo')
            .then(response => response.json())
            .then(data => {
                const systemInfoDiv = document.getElementById('system-info');
                systemInfoDiv.innerHTML = `
                    <p>Computer Name: ${data.hostname}</p>
                    <img src="${data.hostnameQR}" alt="QR Code for ${data.hostname}">
                    <p>Serial Number: ${data.boardSerial}</p>
                    <img src="${data.boardSerialQR}" alt="QR Code for ${data.boardSerial}">
                `;
            })
            .catch(error => {
                console.error('Error:', error);
                document.getElementById('system-info').innerText = 'Failed to fetch system information';
            });

        // Fetch MAC addresses
        fetch('http://localhost:3000/macs')
            .then(response => response.json())
            .then(data => {
                const macInfoDiv = document.getElementById('mac-info');
                macInfoDiv.innerHTML = '';
                data.forEach(item => {
                    const macDiv = document.createElement('div');
                    macDiv.innerHTML = `
                        <p>Interface: ${item.interface}</p>
                        <p>MAC Address: ${item.mac}</p>
                        <p>IP Address: ${item.ip}</p>
                        <img src="${item.qrCodeUrl}" alt="QR Code for ${item.mac}">
                        <hr>
                    `;
                    macInfoDiv.appendChild(macDiv);
                });
            })
            .catch(error => {
                console.error('Error:', error);
                document.getElementById('mac-info').innerText = 'Failed to fetch MAC Addresses and QR Codes';
            });
    </script>
</body>

</html>